<template>
    <div>
        <el-card style="margin:20px 0px"> 
          <CategorySelect @getCategoryId="getCategoryId" @clearList="clearlist" :show="!AttrListShow"></CategorySelect>
        </el-card> 
        <el-card>
          <!--1、显示/隐藏平台属性页-->
          <div v-show="AttrListShow">
            <el-button type="primary"  icon="el-icon-plus" style="margin:10px 0px" size="small" @click="addAttr" :disabled="!categoryidObj.category3ID">添加属性</el-button>
          <!-- 表格:展示平台属性 -->
          <el-table border style="width: 100%" :data="attrList" size="small">
            <el-table-column type="index" label="序号"  width="80px" align="center">
            </el-table-column>
            <el-table-column prop="attrName" label="属性名称"  width="150px">
            </el-table-column>
            <el-table-column prop="prop" label="属性值列表"  width="width">
                <template v-slot:default="{row,$index}">
                  <el-tag type="success" v-for="(attrValue,index) in row.attrValueList" :key="attrValue.id" size="mini" style="margin-right:10px;">
                    {{attrValue.valueName}}
                  </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作"  width="150px">
                <template v-slot:default="{row,$index}">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="editAttr(row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                </template>
            </el-table-column>
          </el-table>
          </div>

           <!--2、显示/隐藏添加|修改属性的结构-->
           <div v-show="!AttrListShow">
             <el-form :model="attrInfo"  ref="ruleForm" size="mini"  :rules="rules">
              <el-form-item label="属性名:" prop="attrName">
                 <el-input placeholder="请输入属性名" v-model="attrInfo.attrName" style="width:190px" size="small"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addAttrValue()"  icon="el-icon-plus" :disabled="!attrInfo.attrName" >添加属性值</el-button>
                <el-button @click="cancel('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
            <!-- 表格:展示临时添加属性 -->
            <el-table border style="width: 100%" :data="attrInfo.attrValueList"  size="mini">
              <el-table-column type="index" label="序号"  width="80px" align="center">
              </el-table-column>
              <el-table-column prop="prop" label="属性值名称">
                  <template v-slot:default="{row,$index}">
                    <!--这里结构需要用到span与input进行来回的切换-->
                     <el-input  :ref="$index" v-model="row.valueName" size="mini" placeholder="请输入属性值名称" v-if="row.flag" @blur="toLook(row)" @keyup.native.enter="toLook(row)"></el-input>
                     <span style="width:100%;display:inline-block;" v-else @click="toEdit(row,$index)">{{row.valueName}}</span>
                  </template>
              </el-table-column>   
              <el-table-column prop="address" label="操作">
                  <template v-slot:default="{row,$index}">
                    <!-- 气泡确认框 -->
                      <el-popconfirm :title="`确定删除${row.valueName}吗?`" @onConfirm="deleteTmpAttr($index)">   
                        <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">
                      </el-button></el-popconfirm>
                  </template>
              </el-table-column>
            </el-table>
            <div style="margin:20px 0px">
                <el-button type="primary" size="mini" @click="addSuccess"  :disabled="attrInfo.attrValueList.length <1">确定</el-button>
                <el-button size="mini" @click="AttrListShow=true">取消</el-button>
            </div>
           </div>
        </el-card>
    </div>
</template>

<script>
// 按需引入lodash当中的深拷贝
import cloneDeep from 'lodash/cloneDeep'
export default {
      name:'Attr',
      data() {
        return {
          //获取并存储分类id
          categoryidObj:{},
          //获取所有属性列表
          attrList:[],
          // 这个属性控制table表格显示与隐藏
          AttrListShow:true,
          //收集新增属性|修改属性使用的
          attrInfo: {
            attrName: "", //属性名
            attrValueList: [], //属性名称中的属性值
            categoryId: 0,   //携带的是category3ID
            categoryLevel:3, 
          },
          rules: {
            attrName: [
              { required: true, message: '属性名不能为空', trigger: 'blur' },
            ]
          }
        }
      },
      methods:{
        //自定义事件的回调
        getCategoryId(categoryids){
            this.categoryidObj = categoryids
            this.getAttrList()
            // 解决添加属性时查询按钮失效问题
            this.AttrListShow=true
        }, 
        clearlist(){
            //重置清除数据列表
            this.attrList = [];
            //重置返回初始页面
            this.AttrListShow=true
        },
        //获取平台属性的数据
        async getAttrList(){
        //只有当三级分类有值时才请求数据
            if(this.categoryidObj.category3ID){
              // 解构获取到子组件的所有分类id
              const {category1ID,category2ID,category3ID} = this.categoryidObj
              let result = await this.$API.attr.reqAttrInfoList(category1ID,category2ID,category3ID)
              console.log(result);
              if(result.code == 200){
                this.attrList = result.data
              }
            }else{
                 // 弹出信息
              this.$message({
                message: ("请选择详细分类"),
                type: 'warning'
              })
            }
           
        },  
        // 添加属性值的数组里添加元素
        addAttrValue() {
          this.attrInfo.attrValueList.push({
          // attrId:是你相应的属性的id，目前是添加属性的操作，还没有相应的属性的id，带给服务器undefined
            // attrId: undefined,
            attrId:this.attrInfo.id, //对于修改某一个属性的时候，可以在已有的属性值基础之上新增新的属性值
            valueName: "",
             //span与input的切换标识
            flag:true,
          })
          // flag属性：给每一个属性值添加一个标记flag，用户切换查看模式与编辑模式，好处是每一个属性值可以控制自己的模式切换
          // 当前flag属性，响应式数据（数据变化视图跟着变化）
          this.$nextTick(()=>{
            // 不能直接写$refs.index,因为index是变量
             this.$refs[this.attrInfo.attrValueList.length-1].focus()
          })
        },
        //添加属性事件
        addAttr(){
          this.AttrListShow=false;
          //清除之前的数据
          this.attrInfo= {
            attrName: "", //属性名
            attrValueList:[], //属性名称中的属性值
            categoryId:this.categoryidObj.category3ID,   //携带的是category3ID
            categoryLevel:3, 
          }
        },
        //修改属性的方法
        editAttr(row){
            this.AttrListShow=false;
            // 将选中的属性复制给attrInfo
            // 由于数据结构当中存在对象里面套数组，数组里面又套对象，因此需要使用深贝解决这类问题
            this.attrInfo = cloneDeep(row);
            // 在修改某一个属性的时候，将相应的属性值元素添加上flag这个标记
            this.attrInfo.attrValueList.forEach((item)=>{
              //这样书写也可以给属性值添加flag自动，但是会发现视图不会跟着变化（因为flag不是响应式数据）
                // item.flag = false;
                if(item.hasOwnProperty('flag')){
                      item.flag = true
                }else{
                // 第一个参数：对象 第二个参数：添加新的响应式属性  第三个参数：新的属性的属性值
                  this.$set(item,'flag',false);
                }
            })
        },
        //取消添加
        cancel(formName){
          this.$refs[formName].resetFields();
        },
        //气泡确认框确定按钮的回调，变为编辑模式
        deleteTmpAttr(index){
        //当前删除无需发送请求
            this.attrInfo.attrValueList.splice(index,1);
        },
        //失去焦点|按回车键时的事件--切换为查看模式，展示span
        toLook(row){
        // 如果属性值为空不能作为新的属性值，需要给用户提示，让其输入一个其他的属性值
        if(row.valueName.trim() == ''){
          this.$message(
            {
                message: ("请输入属性值名称"),
                type: 'warning'
            }
              ) 
          return;
        };
        // 新增的属性值不能与已有的属性值重复
        let isRepat = this.attrInfo.attrValueList.some((item)=>{
            //需要将row从数组里面判断的时候去除,也就是除去当前添加的属性值
            //row：形参是当前用户添加的最新的属性值票【是数组的最后一项元素】
            //判断的时候，需要把已有的数组当中新增的这个属性去除
            if(row!==item){
               //如果item有属性值和当前添加的属性值相同
               return row.valueName == item.valueName;
            }
        }) 
        if(isRepat){
          this.$message(
              {
                  message: ("属性值重复，请重新输入"),
                  type: 'warning'
              }
            ) 
           return;
        }
        //row：形参是当前用户添加的最新的属性值
        //当前编辑模式变为查看模式【让input消失，显示span】
         row.flag=false
        },
        //点击span，自动获取焦点--切换为编辑模式，展示input
        toEdit(row,index){
          row.flag=true
          //把对input文本框的操作，推迟到下次DOM更新之后。否则页面上根本不存在input元素
          this.$nextTick(()=>{
          // 不能直接写$refs.index,因为index是变量
             this.$refs[index].focus()
          })
        },
        //点击确认按钮保存新增|修改的值发送post请求
        addSuccess(){
            this.$refs.ruleForm.validate(async (valid) => {
            if(valid) {
            //整理参数：1、如果用户添加很多属性值，且属性值为空的不应该提交给服务器
            //2、提交给服务器数据当中不应该出现flag字段
            // 返回的是过滤掉后的数组
            this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(item=>{
                //过滤掉属性值不是空的
                if(item.valueName!=''){
                    // 删除掉flag属性
                    delete item.flag
                    return true;
                }
            })
            //确认添加属性发送请求
            console.log("发送的数据",this.attrInfo);
            let resule = await this.$API.attr.reqAddOrUpdateAttr(this.attrInfo)
            if(resule.code == 200){
            //重新获取列表
              this.getAttrList()
              this.$message(
                  {
                    message: (this.attrInfo.id?'修改成功':'添加成功'),
                    type: 'success'
                  }
                ) 
            }
              //返回列表页
              this.AttrListShow = true;
             } 
           });
        },
      }
}
</script>

<style scoped>

</style>